<template>
  <div>
    <wz-table :columns="wzApplicationColumn" :use-index="true" :table-data="fileData">
      <template #sumReceiveAmount="{ row }">
        <div>{{ row.sumReceiveAmount || 0 }}</div>
      </template>
      <template #amount="{ row }">
        <div>{{ row.amount || 0 }}</div>
      </template>
      <!-- 出库数量 -->
      <template #osRealAmount="{ row }">
        <div v-if="+row.osRealAmount" class="click-row" @click="handleMaterialRemovalVisible(row)">
          {{ row.osRealAmount }}
        </div>
        <div v-else>{{ row.osRealAmount || 0 }}</div>
      </template>
      <template #noReceiveAmount="{ row }">
        <div>{{ +row.noReceiveAmount || 0 }}</div>
      </template>
      <!-- 申请退库总数 -->
      <template #retreatAmount="{ row }">
        <div v-if="+row.retreatAmount" class="click-row" @click="handleBackVisible(row)">
          {{ row.retreatAmount || 0 }}
        </div>
        <div v-else>{{ row.retreatAmount || 0 }}</div>
      </template>
      <template #retreatRealAmount="{ row }">
        <div>{{ row.retreatRealAmount || 0 }}</div>
      </template>
      <template #canRetreatAmount="{ row }">
        <div>{{ row.canRetreatAmount || 0 }}</div>
      </template>
    </wz-table>
    <!--出库数量支持点击 点击后弹出页面  -->
    <materialOutDialog
      v-if="materialRemovalVisible"
      :material-removal-visible.sync="materialRemovalVisible"
      :current-row="currentRow"
    />

    <!-- 点击申请退库总数 -->
    <returnDetailDialog
      v-if="returnDetailDialogVisible"
      :material-removal-visible.sync="returnDetailDialogVisible"
      :current-row="currentRow"
    />
  </div>
</template>
<script>
const MATERIAL_INFO_FIRST = [
    // {
    //     label: '项目编码',
    //     prop: 'prcode',
    //     elProps: {
    //         'show-overflow-tooltip': true
    //     }
    // },
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '计量单位',
        prop: 'unit',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '主设备标识',
        prop: 'spuMainName',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '设计数量',
        prop: 'amount',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '领用数量',
        prop: 'sumReceiveAmount',
        elProps: {
            width: '80px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '出库数量',
        prop: 'osRealAmount',
        elProps: {
            width: '80px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '可领用数量',
        prop: 'noReceiveAmount',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '申请退库数量',
        prop: 'retreatAmount',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '完成退库数量',
        prop: 'retreatRealAmount',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '可申请退库数量',
        prop: 'canRetreatAmount',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    }
]
// 系统常量配置
import wzTable from './cTable'
import materialOutDialog from '../dialogComponents/materialOutDialog.vue'
import returnDetailDialog from '../dialogComponents/returnDetailDialog.vue'
export default {
    name: 'LogisticsBack',
    components: {
        wzTable,
        materialOutDialog,
        returnDetailDialog
    },
    props: {
        fileData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            wzApplicationColumn: [],
            materialRemovalVisible: false,
            cancelRetreatVisible: false,
            returnDetailDialogVisible: false,
            currentRow: {}
        }
    },
    computed: {
        // 整体项目展示项目编码其他都不展示
        getManageMode() {
            if (this.$route.query?.manageMode === '03') {
                return true
            } else {
                return false
            }
        }
    },
    created() {
        // MATERIAL_INFO_FIRST : MATERIAL_INFO_FIRST.filter(item => item.prop !== 'prcode')
        this.wzApplicationColumn = MATERIAL_INFO_FIRST
    },
    methods: {
        handleMaterialRemovalVisible(row) {
            this.materialRemovalVisible = true
            this.currentRow = row
        },
        // 点击申请退库梳理
        handleBackVisible(row) {
            this.currentRow = row
            this.returnDetailDialogVisible = true
        }
    }
}
</script>
<style scoped>
.el-upload--text {
    width: 100%;
}

.btnflex {
    display: flex;
    justify-content: space-between;
}

.el-table th {
    padding: 0px 0;
    text-align: center;
    font-size: 12px;
    color: #333333;
    letter-spacing: 0;
}

.el-table td {
    padding: 0px 0;
    text-align: center;
    font-size: 2px;
    color: #333333;
    letter-spacing: 0;
}

.click-row {
    color: #53c7f8;
    cursor: pointer;
}
</style>
